<template>
  <div>
   
      <header id="top">
          <input type="text" v-model="data.mrvalue" @keyup.enter="add" placeholder="在此输入药记录的东西" />
          <p>https://gitee.com/H-ang/test.git</p>
          <ul id="lb">
              <!-- v-for循环列出列表 -->
              <li v-for="(item, index) in data.list" :key="index">
                  <!-- 前面的序号 -->
                  <!-- <span id="xh">{{ index + 1 }}</span> -->
                  <!-- 列表内容 -->
                  <span>{{ item }}</span>
                  <!-- 关闭按钮 -->
                  <!-- 添加点击移除事件，要传形参 -->
                  <button id="qc" @click="remove(index)">删除</button>
              </li>
           
           
        
          </ul>
      </header>
  </div>
 
  <div id="app">  
    <nav>  
      <router-link to="/">首页</router-link> |  
      <router-link to="/profile">另外一个页面</router-link>  
    </nav>  
    <router-view></router-view>  
  </div>  
</template>


<script>
import { reactive, toRefs } from 'vue'

export default {
    setup() {
        const state = reactive({
            data: {
                list: ['一条记事本记录', '两条记事本记录', '三？？？?'],
                mrvalue: ""
            }
        })
        const add = () => {
            state.data.list.push(state.data.mrvalue),
                state.data.mrvalue = ""

        }
        const remove = (index) => state.data.list.splice(index, 1);
        const clear = () => state.data.list = []

        return {
            ...toRefs(state),
            add,
            remove,
            clear
        }
    },
    name: 'App'

}

</script>


<style scoped>
h2,
header {
    margin-left: 150px;
}

input {
    margin-left: 180px;

}

#lb {
    list-style: none;
}

#lb li {
    position: relative;
    border-bottom: 1px solid black;
    width: 400px;
    height: 50px;
    line-height: 50px;
}


#qc {
    position: absolute;
    top: 10px;
    right: 0px;
    color: white;
    font-weight: bold;
    background-color: rgb(233, 11, 41);
    padding: 2px;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
}

#clear {
    margin: 10px 100px;
}
#app {  
    height: 100px;
    width: 500px;
  font-family: Arial, sans-serif;  
  background-color:purple;  
  padding: 20px;  
}  
</style>
